<template>
  <div id="app">
    <Header title="tarbber案例" bg="blue"/>
    <!-- 添加keep-alive 对组件进行缓存 -->
    <keep-alive>
      <component :is="currentCp" />
    </keep-alive>
    <Tabber :tabBarList="tabBarList" @change_tab="changeCp"/>
  </div>
</template>

<script>
import Header from './views/header.vue'
import List from './views/list.vue'
import Tabber from './views/tabber.vue'
import Search from './views/search.vue'
import User from './views/user.vue'
export default {
  name: 'App',
  components: {
    Header,
    List,
    Tabber,
    // eslint-disable-next-line vue/no-unused-components
    Search,
    // eslint-disable-next-line vue/no-unused-components
    User
  },
  data () {
    return {
      tabBarList: [
        { name: '列表', icon: 'icon-shangpinliebiao', tabName: 'List' },
        { name: '搜索', icon: 'icon-sousuo', tabName: 'Search' },
        { name: '用户', icon: 'icon-user', tabName: 'User' }
      ],
      currentCp: 'List'
    }
  },
  methods: {
    changeCp (tabName) {
      this.currentCp = tabName
    }
  }
}
</script>

<style lang="less" scrped>
#app {
  padding: 50px 0;
}
</style>
